<template>
  <div style="display: flex;flex-direction: column">
    <div class="top">
      <div class="top_header">
        <a class="top_city" href="javascript:history.go(-1)"><i class="fa-left"></i>返回</a>
        <h1>车辆详情</h1>
        <span class="top_user"  @click="$router.push({name:'Account'})"><i class="fa-user" aria-hidden="true"></i></span>
      </div>
    </div>
    <div class="order" style="height: 0;flex-grow: 1">
      <div style="height: 0;flex-grow: 1;overflow-y: scroll">
        <div class="orderpic">
          <md-swiper
            :autoplay="5000"
            transition="fade"
            ref="swiper">
            <md-swiper-item :key="$index" v-for="(item, $index) in imgs">
              <img :src="item.url" alt="" style="width:100%">
            </md-swiper-item>
          </md-swiper>
        </div>
        <div class="carname">
          {{carinfo.name}}
        </div>
        <div class="carLogo" v-show="false">
          <i class="iconfont icon-benchi"></i>
        </div>

        <!--基本参数-->
        <div class="infotitle">车辆信息</div>

        <div class="info">

          <div class="arg">
            <div>
              <span class="argtitle">座位</span>
              <span class="arginfo">{{carinfo.sits}}座</span>
            </div>
            <div>
              <span class="argtitle">车辆类型</span>
              <span class="arginfo">{{carinfo.cartype}}</span>
            </div>
            <div>
              <span class="argtitle">动力/排量</span>
              <span class="arginfo">{{carinfo.pl}}</span>
            </div>
          </div>
        </div>

        <!--计费方式-->
        <div class="infotitle">计费</div>
        <div class="getcar">
          <md-check-box
            v-model="counttype"
            :options="options3"
          >
            <div slot="content" slot-scope="{ option }" class="payment-gateway">

              <div class="clearfix">

                <span style="font-size: 14px;"  v-text="option.label"></span>
              </div>
              <div v-text="option.desc" style="font-size: 12px;color:#666">

              </div>
            </div>
          </md-check-box>
        </div>

        <div class="infotitle">起始时间</div>
        <div class="cdate" style="padding:0 40px">
          <div class="sdate" @click="showsdate">
            <span>取车</span>
            <div> {{ sdate | moment('MM / DD') }}</div>
            <div> {{ sdate | moment(" HH : mm ") }}</div>
          </div>
          <div class="rdate">
            <div v-html="countDatestr"></div>
          </div>
          <div class="sdate" @click="showedate">
            <span>还车</span>
            <div> {{ edate | moment('MM / DD') }} </div>
            <div> {{ edate | moment(" HH : mm ") }}</div>
          </div>
        </div>

        <!--取车方式-->
        <div class="infotitle">取车方式</div>
        <div class="getcar">
          <md-check-box
            v-model="gettype"
            :options="options"
          >
            <div slot="content" slot-scope="{ option }" class="payment-gateway">

              <div class="clearfix">

                <span style="font-size: 14px;"  v-text="option.label"></span>
              </div>
              <div v-text="option.desc" style="font-size: 12px;color:#666">

              </div>
            </div>
          </md-check-box>
        </div>

        <div class="setAdree" style="padding:5px 40px 20px" @click="getMap" v-show="gettype===1">
          <i class="iconfont icon-shouhuodizhi"></i> <span style="padding:5px 10px">{{this.saddress ? this.saddress : '点击选择地址'}} </span>
        </div>

        <div class="infotitle" v-if="!carinfo.need_driver">是否需要代驾</div>
        <div class="getcar" v-if="!carinfo.need_driver">
          <md-check-box
            v-model="need_driver"
            :options="options2"
          >
            <div slot="content" slot-scope="{ option }" class="payment-gateway">

              <div class="clearfix">

                <span style="font-size: 14px;"  v-text="option.label"></span>
              </div>
              <div v-text="option.desc" style="font-size: 12px;color:#666">

              </div>
            </div>
          </md-check-box>
        </div>
        <!-- 车辆费用说明 -->
        <div class="infotitle">租车费用</div>
        <div class="pricebox">
          <div class="priceitem">
            <div class="l1 clearfix">
              <span class="pleft" style="float:left"> 4小时</span>
              <span class="pright" style="float:right"> {{carinfo.fourfee.fee}}元</span>
            </div>
            <div class="l2"> 原价{{carinfo.fourfee.fee *1.2}}元</div>
            <div class="l3">超出4小时, 每小时{{carinfo.fourfee.driver_fee}}元 </div>
          </div>

          <div class="priceitem">
            <div class="l1 clearfix">
              <span class="pleft" style="float:left"> 8小时</span>
              <span class="pright" style="float:right"> {{carinfo.eightfee.fee}}元</span>
            </div>
            <div class="l2"> 原价{{carinfo.eightfee.fee*1.2}}元 </div>
            <div class="l3">超出8小时, 每小时{{carinfo.eightfee.driver_fee}}元</div>
          </div>

          <div class="priceitem">
            <div class="l1 clearfix">
              <span class="pleft" style="float:left"> 1天</span>
              <span class="pright" style="float:right"> {{carinfo.dayfee.fee}}元</span>
            </div>
            <div class="l2"> 原价{{carinfo.dayfee.fee*1.2}}元 </div>
            <div class="l3">超出每小时{{carinfo.dayfee.driver_fee}}元</div>
          </div>

        </div>

        <!-- 带驾司机费用说明 -->
        <div class="infotitle">带驾费用</div>
        <div class="pricebox">
          <div class="priceitem">
            <div class="l1 clearfix">
              <span class="pleft" style="float:left"> 4小时</span>
              <span class="pright" style="float:right"> {{carinfo.fourfee.driver_fee}}元</span>
            </div>
            <div class="l2"> 原价{{carinfo.fourfee.driver_fee * 1.2}}元 </div>
            <div class="l3">超出4小时, 每小时5元</div>
          </div>

          <div class="priceitem">
            <div class="l1 clearfix">
              <span class="pleft" style="float:left"> 8小时</span>
              <span class="pright" style="float:right"> {{carinfo.eightfee.driver_fee}}元</span>
            </div>
            <div class="l2"> 原价{{carinfo.eightfee.driver_fee * 1.2}}元 </div>
            <div class="l3">超出8小时, 每小时5元</div>
          </div>

          <div class="priceitem">
            <div class="l1 clearfix">
              <span class="pleft" style="float:left"> 1天</span>
              <span class="pright" style="float:right"> {{carinfo.dayfee.driver_fee}}元</span>
            </div>
            <div class="l2"> 原价{{carinfo.dayfee.driver_fee * 1.2}}元 </div>
            <div class="l3">超出后每小时5元</div>
          </div>

        </div>

        <!-- 车辆介绍 -->
        <div class="infotitle">车辆介绍</div>
        <div class="carinfo">
          {{carinfo.desc}}
        </div>
        <!-- 联系客服 -->
        <div class="infotitle">联系客服</div>

        <div class="custom"> 18174123678 </div>

      </div>
      <div class="checkout" @click="topay" >立即租车</div>

      <md-date-picker
        v-model="sDatePickerShow"
        ref="sdatepicker"
        type="custom"
        today-text="今天"
        title="选择取车时间"
        :minDate="minDate"
        :default-date="currentDate1"
        :custom-types="[ 'MM','dd', 'hh', 'mm']"
        :minute-step="15"
        @confirm="onDatePickerConfirms"
      ></md-date-picker>

      <md-date-picker
        v-model="eDatePickerShow"
        ref="edatepicker"
        type="custom"
        today-text="(今天)"
        title="选择还车时间"
        :default-date="currentDate2"
        :custom-types="[ 'MM','dd', 'hh','mm']"
        :minute-step="15"
        @confirm="onDatePickerConfirme"
      ></md-date-picker>

      <div class="map" v-show="showmap" style="display: flex;flex-direction: column">
        <div class="maphd clearfix">
          <div class="mipt">
            <input type="text" placeholder="输入您的地址" @input="searchMap($event)">
          </div>
          <div class="mbtn" @click="showmap = false">取消</div>
        </div>
        <div class="maplist" style="flex-grow: 1;height: 0;overflow-y: scroll ">
          <div class="mapitem" v-for="item of mapres" @click="updateAddress(item)" :key="item.id">
            <div>{{item.name}}</div>
            <div >{{item.address}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import { Toast } from 'mand-mobile'
export default {
  name: 'Order',
  data () {
    return {
      showmap: false,
      minDate: new Date(),
      currentDate1: new Date(),
      currentDate2: new Date(),
      sDatePickerShow: false,
      eDatePickerShow: false,
      sdate: new Date(),
      edate: new Date(),
      countDatestr: ` <span style="display:block;font-size: 20px;margin-top: 30px;">请选择</span>`,
      carinfo: {
        dayfee: {
          fee: 0.00,
          driver_fee: 0.00
        },
        fourfee: {
          fee: 0.00,
          driver_fee: 0.00
        },
        eightfee: {
          fee: 0.00,
          driver_fee: 0.00
        }
      },
      gettype: 0,
      need_driver: 1,
      counttype: 'day',
      total: 0,
      imgs: [
        './c1.jpg',
        './c2.jpg'
      ],
      options: [
        {value: 0, label: '上门取车', desc: '取车地址:青秀区东盟商务区'},
        {value: 1, label: '送车上门', desc: '会收取一定的上门服务费'}
      ],
      options2: [
        {value: 1, label: '需要代驾', desc: '根据您的用车时间收费'},
        {value: 0, label: '自驾', desc: '需缴纳一定的保证金'}
      ],
      options3: [
        {value: '4hour', label: '4小时', desc: '199元'},
        {value: '8hour', label: '8小时', desc: '299元'},
        {value: 'day', label: '按天', desc: '300元'}
      ],
      mapres: [],
      saddress: ''

    }
  },
  created () {

  },
  beforeMount: async function () {
    let now = new Date()
    now.setHours(now.getHours() + 2)
    this.sdate = now
    console.log(this.sdate)
    console.log(this.edate)
    this.getcarinfo()
    let _d = new Date()
    _d.setDate(_d.getDate() + 2)
    _d.setHours(_d.getHours() + 2)
    this.edate = _d
    this.minDate = now
    this.currentDate1 = this.sdate
    this.currentDate2 = this.edate

    this.countDate()
  },
  watch: {
    counttype: function () {
      console.log(this.sdate)

      if (this.counttype === '4hour') {
        let _d = new Date()
        _d.setHours(this.sdate.getHours() + 4)
        _d.setDate(this.sdate.getDate() + 4)
        this.edate = _d
        this.countDate()
      } else if (this.counttype === '8hour') {
        let _d = new Date()
        _d.setHours(this.sdate.getHours() + 8)
        _d.setDate(this.sdate.getDate() + 4)
        this.edate = _d
        this.countDate()
      } else if (this.counttype === 'day') {
        let _d = new Date()
        _d.setDate(this.sdate.getDate() + 2)
        this.edate = _d
        this.countDate()
      }
    },
    sdate: function (nv, ov) {
      let _d = new Date()
      if (this.counttype === '4hour') {
        _d.setHours(nv.getHours() + 4)
        this.edate = _d
        this.countDate()
      } else if (this.counttype === '8hour') {
        _d.setHours(nv.getHours() + 8)
        this.edate = _d
        this.countDate()
      } else if (this.counttype === 'day') {
        _d.setDate(nv.getDate() + 2)
        this.edate = _d
        this.countDate()
      }
    }

  },
  methods: {

    getcarinfo: async function () {
      Toast.loading('数据加载中')
      let _res = await this.$api.post('/getcarinfo', {cid: this.$store.state.order.cid})
      Toast.hide()
      let _car = _res.data.data
      for (let _v of _car.feestanders) {
        if (_v.hours === 24) {
          _car.dayfee = _v
          this.options3[2].desc = _v.fee
        } else if (_v.hours === 8) {
          _car.eightfee = _v
          this.options3[1].desc = _v.fee
        } else if (_v.hours === 4) {
          _car.fourfee = _v
          this.options3[0].desc = _v.fee
        }
      }

      if (_car.imgs) {
        this.imgs = JSON.parse(_car.imgs)
      }
      if (_car.type === 1) {
        _car.cartype = '小轿车'
      } else if (_car.type === 2) {
        _car.cartype = '越野车'
      } else if (_car.type === 3) {
        _car.cartype = '商务车'
      }
      this.carinfo = _car
    },
    topay: async function () {
      // 是否完善了身份证信息
      const { id_num, id_photo_a, id_photo_b, license_a, license_b } = this.$store.state.wxuser
      if (!id_num || !id_photo_a || !id_photo_b || !license_a || !license_b) {
        Toast.info('为了更新为您提供服务，请我完善个人信息')
        setTimeout(() => {
          this.$router.push({name:'Account'})
        }, 2000)
        return false
      }

      this.$store.commit('updateOrder', {
        need_driver: this.need_driver,
        counttype: this.counttype,
        gettype: this.gettype,
        carinfo: this.carinfo,
        address: this.saddress
      })

      this.$router.push({name: 'Pay'})
    },
    onDatePickerConfirms: async function (columnsValue) {
      let _d = new Date()
      _d.setMonth(columnsValue[0].value - 1)
      _d.setDate(columnsValue[1].value)
      _d.setHours(columnsValue[2].value)
      _d.setMinutes(columnsValue[3].value)
      console.log(_d)
      console.log(this.edate)
      if (_d < new Date().setHours(new Date().getHours() + 2)) {
        Toast.failed('至少提前两个小时下单')
        let _nd = new Date()
        _nd.setHours(_nd.getHours() + 2)
        this.sdate = _nd
      } else {
        this.sdate = _d
      }
      /*  if (_d > this.edate && this.counttype === 'day') {
        Toast.failed('取车时间不能小于开车时间')
        return false
      } */
      this.countDate()
    },
    onDatePickerConfirme: async function (columnsValue) {
      let _d = new Date()
      _d.setMonth(columnsValue[0].value - 1)
      _d.setDate(columnsValue[1].value)
      _d.setHours(columnsValue[2].value)
      _d.setMinutes(columnsValue[3].value)
      if (_d < this.sdate && this.counttype === 'day') {
        Toast.failed('取车时间不能小于开车时间')
        return false
      }

      this.edate = _d
      this.countDate()

      console.log(this.edate)
      console.log(this.sdate)
    },
    showsdate: async function () {
      this.sDatePickerShow = true
    },
    showedate: async function () {
      this.eDatePickerShow = true
    },
    countDate: function () {
      let _d = parseInt((this.edate - this.sdate) / 1000)
      let _day = parseInt(_d / (24 * 60 * 60))
      let _hour = parseInt((_d % (24 * 60 * 60)) / (60 * 60))

      this.countDatestr = `<span style="display:block;font-size: 20px;margin-top: 30px;">${_day}天</span>`

      if (_hour > 0) {
        this.countDatestr += `<span>${_hour}个小时</span>`
      }

      this.$store.commit('updateOrder', {sdate: this.sdate, edate: this.edate})
    },
    getMap: function () {
      this.showmap = true
    },
    searchMap: async function (ev) {
      console.log(ev.target.value)
      let _res = await this.$api.get('https://restapi.amap.com/v3/place/text', {params: {
        key: 'e2c4f60587c2581f55c985731bb98992',
        keywords: ev.target.value,
        city: '南宁',
        citylimit: true,
        extensions: 'all'
      }})

      if (_res.data.status) {
        this.mapres = _res.data.pois
      }
    },
    updateAddress: async function (pos) {
      this.saddress = pos.name
      this.showmap = false
    }
  }
}
</script>

<style scoped>
body {
    font-family: 'Roboto', sans-serif;
    color: #888;
    font-size: 13px;
    background: #fff;
    margin: 0;
  }

  h1,h2,h3,h4,h5,h6 {
    line-height: 110%;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: #333;
  }

  ul, ol{
    list-style: none;
  }
  li{
    list-style-type: none;
  }

  p {
    margin: 8px 0;
  }

  a {
    color: #111;
    text-decoration: none;
  }

  a:hover {
    color: #111;
  }

  a.link-color {
    color: #e82954;
  }

  a.link-color:hover {
    color: #e82954;
  }
.top {
    width: 100%;
    height: 65px;
    overflow: hidden;
}
.top_header {
    background:url(../assets/images/top-bj.jpg)no-repeat center;
    background-size:100% 100%;
    width: 100%;
    position: relative;
    height: 50px;
    box-shadow: rgba(87, 135, 253, 0.9) 0px 0px 15px;

}
.top_header a {
    margin: 0;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}
.top_city {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: auto;
    height: 50px;
    position: absolute;
    left: 20px;
    top: 0;
    line-height: 50px;
    font-size: 16px;
}
.fa-down{
    width: 20px;
    height: 11px;
    background:url(../assets/images/down.png)no-repeat center;
    background-size:12px auto;

}
.fa-left{
    width: 20px;
    height: 30px;
    background:url(../assets/images/ico-left.png)no-repeat center;
    background-size:8px auto;

}
.fa-user{
    width: 22px;
    height: 26px;
    background:url(../assets/images/ico-user.png)no-repeat center;
    background-size:20px auto;

}
.top_header h1 {
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}
.top_city i {
    font-size: 16px;
    margin-top: 2px;
}
.top_user {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    width: auto;
    height: 45px;
    position: absolute;
    right: 15px;
    top: 2px;
}
  .top_user i {
   font-size: 30px;
}
  .order{
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 96%;
    height: auto;
    overflow: hidden;
  }
  .orderpic{
    height: 250px;
    position: relative;
    overflow: hidden;
  }
  .backbtn{
    width: 50px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    position: absolute;
    top:25px;
    left:20px;
    font-size: 12px;
    background: rgba(0,0,0,.7);
    color:#fff
  }
 .carname{
    text-align: left;
    line-height: 40px;
    font-size: 18px;
    margin-top: 16px;
  }
  .carLogo{
    text-align: center;
  }
  .carLogo >i {
    font-size: 20px;
    color:#666;
    line-height: 30px;
  }
  .info{
    margin-top: 15px;
    padding:0 20px
  }
  .infotitle{
    text-align: center;
    font-size: 15px;
    line-height: 26px;
    color: #4c91f1;
    border-top:1px solid #f2f2f2;
    padding-top: 15px;
  }
  .infotitle:after{
    content: "";
    margin:0 auto;
    display: block;
  }
  .arg{
    display: flex;
    height: 80px;
    margin-top: 15px;
  }
  .arg > div{
    width: 0;
    flex-grow: 1;
    text-align: center;
  }

  .argtitle{
    font-size: 12px;
    display: block;
    line-height: 2;
  }
  .arginfo{
    display: block;
    font-size: 18px;
  }
  .pricebox{
    padding:10px 40px
  }
  .priceitem{
    margin-bottom: 20px;
  }

  .l2{
    text-align: right;
    font-size: 12px;
    color:#999;
    text-decoration-line:line-through;

  }
  .l3{

    text-align: right;
    font-size: 12px;
    color:#666
  }

  .carinfo{
    padding:10px 40px;
    text-indent: 2em;
    font-size:12px;
    color:#666;
  }
  .checkout{
    height: 50px;
    background: -webkit-linear-gradient(top left,#6a78d0,#7986db);
    color:#fff;
    line-height: 50px;
    text-align: center;

  }
  .custom{
    text-align: center;
    line-height: 40px;
  }
  .getcar{
    padding:10px 40px;
    margin-bottom: 20px;

  }
  .cdate{
    margin:25px 0;
    position: relative;
    height: 120px;
  }
  .cdate>.rdate{

    height: 100px;
    width: 100px;
    border-radius: 50%;
    border:1px solid #6a78d0;
    left:50%;
    transform: translateX(-50%);
    position: absolute;
    text-align: center;
  }

  .sdate{
    width: 30%;
  }

  .sdate>span{
    font-size: 12px;
    color:#666;
    text-align: left;
  }
  .sdate>div:first-of-type{
    font-size: 18px;
  }

  .sdate:first-of-type{
    top:50%;
    transform: translateY(-50%);
    left:40px;
    position: absolute;
  }
  .sdate:last-of-type{
    top:50%;
    transform: translateY(-50%);
    text-align: right;
    right:40px;
    position:absolute;
  }
  .sdate>div:last-child{
    font-size: 12px;
    color:#666;
  }
  .maphd{
    height: 50px;
    border-bottom:1px solid #d6d6d6;
    position:relative;
  }
  .maphd .mbtn{
    position: absolute;
    width: 40px;
    height: 30px;
    border: 1px solid #000;
    right:5px;
    top:50%;
    transform: translateY(-50%);
    font-size: 12px;
    line-height: 30px;
    text-align: center;

  }
  .mipt{
    line-height: 50px;
    padding-left:10px
  }
  .mipt > input{
    width: 100%;
    height: 100%;
    outline:none;
    border:none;
    line-height: 50px;

  }
  .mapitem{
    padding:15px;
    line-height:15px;
    border-bottom:1px solid #e8e8e8
  }
  .mapitem > div:first-of-type{

  }
  .mapitem > div:last-of-type{
    line-height:15px;
    color:#666;
    font-size: 12px;
  }
  .map{
    position:absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
  }
</style>
